import Vue from "vue";
/*
 *  定义公共js里，在入口文件main.js中import；
 *  给elementUI的dialog上加上 v-fullScreen 指令就可以实现弹窗的全屏和拉伸了。
 * 
    结合css使用
    <el-dialog 
      v-fullScreen
    >
      <span
        slot="footer"
        class="dialog-footer"
      ></span>
      <div class="el-dialog-div"></div>
    </el-dialog>
    <style>
      .el-dialog-div {
        height: 50vh;
        overflow: auto;
      }
    </style>
 */
Vue.directive("fullScreen", {
  bind: function (el, binding, vnode) {
    let isFullScreen = false;

    const dialog = el.querySelector(".el-dialog");
    const header = el.querySelector(".el-dialog__header");

    if (!header || !dialog || !vnode) return;

    //给弹窗加上overflow auto；不然缩小时框内的标签可能超出dialog；
    dialog.style.overflow = "auto";

    header.style.paddingRight = "43px";
    header.style.boxShadow =
      "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
    //清除选择头部文字效果
    header.onselectstart = new Function("return false");
    //头部加上可拖动cursor
    header.style.cursor = "move";

    const { width, top } = vnode.componentInstance;

    const fullScreenBtn = document.createElement("button");
    fullScreenBtn.type = "button";
    fullScreenBtn.style =
      "float:right;padding:0;background: 0 0;border:0;outline:0;cursor:pointer;font-size:16px;";

    const fullScreenIcon = document.createElement("i");
    fullScreenIcon.className = "el-icon el-icon-full-screen";
    fullScreenBtn.append(fullScreenIcon);

    /*  拖拽方法  */
    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
    const sty = dialog.currentStyle || window.getComputedStyle(dialog, null);
    let moveDown = (e) => {
      // 鼠标按下，计算当前元素距离可视区的距离
      const disX = e.clientX - header.offsetLeft;
      const disY = e.clientY - header.offsetTop;
      // 获取到的值带px 正则匹配替换
      let styL, styT;
      // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
      if (sty.left.includes("%")) {
        styL =
          +document.body.clientWidth * (+sty.left.replace(/\%/g, "") / 100);
        styT =
          +document.body.clientHeight * (+sty.top.replace(/\%/g, "") / 100);
      } else {
        styL = +sty.left.replace(/\px/g, "");
        styT = +sty.top.replace(/\px/g, "");
      }
      document.onmousemove = function (e) {
        // 通过事件委托，计算移动的距离
        const l = e.clientX - disX;
        const t = e.clientY - disY;
        // 移动当前元素
        dialog.style.left = `${l + styL}px`;
        dialog.style.top = `${t + styT}px`;
        //将此时的位置传出去
        //binding.value({x:e.pageX,y:e.pageY})
      };

      document.onmouseup = function (e) {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    };

    fullScreenBtn.addEventListener("click", () => {
      isFullScreen = !isFullScreen;
      handleFullScreen(el, dialog, isFullScreen, top, width, header, moveDown);
      return false;
    });

    header.append(fullScreenBtn);

    header.addEventListener("dblclick", () => {
      isFullScreen = !isFullScreen;
      handleFullScreen(el, dialog, isFullScreen, top, width, header, moveDown);
      return false;
    });

    header.onmousedown = moveDown;
  },
});

/**
 * 全屏方法
 */
function handleFullScreen(
  el,
  dialog,
  isFullScreen,
  marginTop,
  width,
  header,
  moveDown
) {
  if (!dialog) return false;
  if (isFullScreen) {
    dialog.style.marginTop = "0";
    dialog.style.position = "absolute";
    dialog.style.top = "0px";
    dialog.style.bottom = "0px";
    dialog.style.left = "0px";
    dialog.style.width = "100%";
    dialog.style.height = "100vh";
    //el-dialog下只有一个div
    const elDialogFooter = el.querySelector(".el-dialog__footer");
    if (elDialogFooter && elDialogFooter != null) {
      const elDialogBody = el.querySelector(".el-dialog__body");
      elDialogBody.style.height = "85%";
    } else {
      const elDialogBody = el.querySelector(".el-dialog__body");
      elDialogBody.style.height = "90%";
    }
    const elDialogDiv = el.querySelector(".el-dialog-div");
    if (elDialogDiv && elDialogDiv != null) {
      elDialogDiv.style.height = "100%";
    }
  } else {
    dialog.style.marginTop = marginTop;
    dialog.style.width = width;
    dialog.style.height = "auto";
    dialog.style.position = "relative";
    header.onmousedown = moveDown;
    //el-dialog下只有一个div
    const elDialogBody = el.querySelector(".el-dialog__body");
    elDialogBody.style.height = "";
    const elDialogDiv = el.querySelector(".el-dialog-div");
    if (elDialogDiv && elDialogDiv != null) {
      elDialogDiv.style.height = "";
    }
  }
}
